<template>
  <div class="container">
    <h3>登陆</h3>
    <h4>用户名</h4>
    <input type="text" v-model="name" class="from-control">
    <h4>密码</h4>
    <input type="password" v-model="password" class="from-control">
    <h4>验证码</h4>
    <img :src="captcha" alt="验证码" @click="changeCaptcha">
    <input type="password" v-model="code" class="from-control">
    <br>
    <input class="btn btn-success" type="submit" value="登陆" @click="login">

  </div>
</template>

<script>
//Qs是axios内置的一个模块 在data中配置，进行参数转换
import Qs from 'qs'

export default {
  name: 'Login',
  data () {
    return {
      name:"",// 用户名
      password:'',// 密码
      captcha: 'http://localhost:9090/captcha',
      code:""   // 验证码
    }
  },
  methods:{
    // 点击图片时更新验证码图片
    changeCaptcha: function () {
      this.captcha = 'http://localhost:9090/captcha?v='+ Date.now()
    },

    login:function () {
    // 使用axios发送登录请求
      let vm = this;
      this.axios({
        url:'http://localhost:9090/loginJson',
        method:"post",
        //axios 默认是使用json格式传递参数的 application.json
        transformRequest: [function (data) {
          return Qs.stringify(data)
        }],
        // data 是到后端传递的参数
        data:{
          name:vm.name,
          password:vm.password,
          code:vm.code
        },
      }).then(function (res){
        console.log(res.data)
        if (res.data.code==0){
          //登录成功
          //把用户信息放入store中,然后就可以在其他组件中获取用户信息了
          vm.$store.commit('updateUser',res.data.data);
          //路由到首页
          vm.$router.push("home")
        }
      }).catch(function (err){
        console.log(err.data)
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
